<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		* {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        body {
            background: #000;
        }

        .wrap {
            margin: 100px auto 0;
            width: 630px;
            height: 394px;
            padding: 10px 0 0 10px;
            background: #000;
            overflow: hidden;
            border: 1px solid #fff;
        }

        .wrap li {
            float: left;
            margin: 0 10px 10px 0;

        }

        .wrap img {
            display: block;
            border: 0;
        }
	</style>
	<script type="text/javascript" src="jquery-3.4.1.js"></script>
	<script type="text/javascript">
		$(function () {
            //获取所有的li注册鼠标进入和离开的事件
            $(".wrap>ul>li").mouseover(function () {
                $(this).siblings("li").css("opacity",0.5);
                $(this).css("opacity",1);
            });
            $(".wrap>ul>li").mouseout(function () {
               $(this).parent().children("li").css("opacity",1);
            });


        });
	</script>
</head>
<body>
	<div class="wrap">
    <ul>
	        <li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
	        <li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
	        <li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
	        <li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
	        <li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
	        <li><a href="#"><img src="images/06.jpg" alt=""/></a></li>
    </ul>
	</div>
</body>
</html>